
.dx-loadindicator {
    background-color: transparent;
}

.dx-loadindicator-image {
    background-image: @loadindicator-image-bg;
}

.dx-loadindicator-icon {
    position: relative;
    top: 15%;
    left: 15%;
    width: 70%;
    height: 70%;

    .dx-loadindicator-segment {
        position: absolute;
        width: 19%;
        height: 30%;
        left: 44.5%;
        top: 37%;
        opacity: 0;
        background: @loadindicator-bg;
        .border-radius(50%);
        .border-radius-top-left(10%);
        .border-radius-top-right(10%);
        .box-shadow(0 0 3px @loadindicator-segment-shadow-color);
        .animation(dx-generic-loadindicator-opacity 1s linear infinite);
    }

    @-webkit-keyframes dx-generic-loadindicator-opacity {
        from {
            opacity: 1;
        }

        to {
            opacity: 0.55;
        }
    }

    @-moz-keyframes dx-generic-loadindicator-opacity {
        from {
            opacity: 1;
        }

        to {
            opacity: 0.55;
        }
    }

    @-ms-keyframes dx-generic-loadindicator-opacity {
        from {
            opacity: 1;
        }

        to {
            opacity: 0.85;
        }
    }

    @-o-keyframes dx-generic-loadindicator-opacity {
        from {
            opacity: 1;
        }

        to {
            opacity: 0.55;
        }
    }

    @keyframes dx-generic-loadindicator-opacity {
        from {
            opacity: 1;
        }

        to {
            opacity: 0.55;
        }
    }

    .dx-loadindicator-segment0 {
        .transform(rotate(0deg) translate(0, -142%));
        .animation-delay(0s);
    }

    .dx-loadindicator-segment1 {
        .transform(rotate(45deg) translate(0, -142%));
        .animation-delay(-0.875s);
    }

    .dx-loadindicator-segment2 {
        .transform(rotate(90deg) translate(0, -142%));
        .animation-delay(-0.75s);
    }

    .dx-loadindicator-segment3 {
        .transform(rotate(135deg) translate(0, -142%));
        .animation-delay(-0.625s);
    }

    .dx-loadindicator-segment4 {
        .transform(rotate(180deg) translate(0, -142%));
        .animation-delay(-0.5s);
    }

    .dx-loadindicator-segment5 {
        .transform(rotate(225deg) translate(0, -142%));
        .animation-delay(-0.375s);
    }

    .dx-loadindicator-segment6 {
        .transform(rotate(270deg) translate(0, -142%));
        .animation-delay(-0.25s);
    }

    .dx-loadindicator-segment7 {
        .transform(rotate(315deg) translate(0, -142%));
        .animation-delay(-0.125s);
    }

    .dx-loadindicator-segment8,
    .dx-loadindicator-segment9,
    .dx-loadindicator-segment10,
    .dx-loadindicator-segment11,
    .dx-loadindicator-segment12,
    .dx-loadindicator-segment13,
    .dx-loadindicator-segment14,
    .dx-loadindicator-segment15 {
        display: none;
    }
}

.dx-rtl .dx-loadindicator-icon {
    right: 15%;
    left: 0;
}
